import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export default function StatsCard({ title, value, icon, color, increase, description }) {
  const bgColor = {
    blue: 'bg-gradient-to-r from-blue-400 to-blue-500',
    green: 'bg-gradient-to-r from-green-400 to-green-500',
    purple: 'bg-gradient-to-r from-purple-400 to-purple-500',
    pink: 'bg-gradient-to-r from-pink-400 to-pink-500',
    yellow: 'bg-gradient-to-r from-yellow-400 to-yellow-500',
    indigo: 'bg-gradient-to-r from-indigo-400 to-indigo-500',
  }[color || 'blue'];

  const textColor = 'text-white';
  
  return (
    <div className="relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
      <div className={`${bgColor} p-6`}>
        <div className="flex items-center justify-between">
          <div>
            <h3 className={`text-lg font-medium ${textColor}`}>{title}</h3>
            <div className="mt-1 flex items-baseline">
              <p className={`text-3xl font-bold ${textColor}`}>{value}</p>
              {increase && (
                <span className="ml-2 text-sm font-medium bg-white bg-opacity-20 px-2 py-0.5 rounded-full">
                  {increase > 0 ? `+${increase}%` : `${increase}%`}
                </span>
              )}
            </div>
            {description && (
              <p className={`mt-2 text-sm font-medium ${textColor} opacity-80`}>{description}</p>
            )}
          </div>
          <div className={`p-3 rounded-full bg-white bg-opacity-20 text-white text-2xl`}>
            <FontAwesomeIcon icon={icon} />
          </div>
        </div>
      </div>
      <div className="absolute bottom-0 left-0 w-full h-1 bg-white bg-opacity-30"></div>
    </div>
  );
} 